<template>
  <div>
    御剑乘风来,除魔天地间!===app
    <SlotTab :list="list">
      <template #edit="{ row }">
        <button @click="lookHandel(row)">编辑</button>
        <button @click="cancel(row.id)">删除</button>
      </template>
    </SlotTab>
    <!-- 对话框 -->
    <Dialog :flag="flag">
      姓名: <input type="text" v-model="dialogData.name" /> 年龄:
      <input type="text" v-model="dialogData.age" /> <br /><br />
      <footer>
        <div class="left">
          <button @click="cancelE">取消编辑</button>
          <button @click="changeE">确认编辑</button>
        </div>
        <div class="right">
          <button @click="add">添加</button>
          <span v-show="flag1">名字和年龄都不能为空</span>
        </div>
      </footer>
    </Dialog>
  </div>
</template>
<script>
import SlotTab from './slot-tab/SlotTab.vue'
import Dialog from './slot-tab/Dailog.vue'
export default {
  components: { SlotTab, Dialog },
  name: '',


  data () {
    return {
      list: [
        { id: 1, name: '赵小云', age: 19 },
        { id: 2, name: '赵小云', age: 29 },
        { id: 3, name: '赵小云', age: 39 }
      ],
      flag: false,
      dialogData: {
        name: '',
        age: ''
      },
      flag1: false
    }
  },
  created () {
  },
  computed: {
  },
  methods: {
    cancel (id) {
      this.list = this.list.filter(item => item.id != id)
    },
    lookHandel (row) {
      this.flag = true
      this.dialogData = JSON.parse(JSON.stringify(row))
      console.log(this.dialogData);
    },
    cancelE () {
      // this.$emit('update:flag', false);
      this.flag = false
    },
    changeE () {
      // console.log('111')
      const row1 = this.list.find(item => item.id == this.dialogData.id)
      console.log(row1)
      row1.name = this.dialogData.name
      row1.age = this.dialogData.age

      //关闭对话框:
      this.flag = false
      // console.log('关闭')
      //清空对话框数据
      this.dialogData.name = ''
      this.dialogData.age = ''
    },
    add () {
      // console.log('添加')
      if (this.dialogData.name.length != 0 & this.dialogData.age.length != 0) {
        this.list.push({
          id: Date.now(),
          name: this.dialogData.name,
          age: this.dialogData.age
        })
        this.flag = false
        this.dialogData.name = ''
        this.dialogData.age = ''
      } else {
        this.flag1 = !this.flag1

      }
    }

  }
}
</script>
<style lang='less'  scoped>
</style>
